<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>模板语法</title>
    <!-- ctrl + k + c单行注释    这里引入开发的VUE-->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <!--1：插值语法，并且可以使用JS表达式-->
      <h1>插值语法</h1>
      <h2>Hello, {{name.toUpperCase()}}</h2>
      <!--2：指令语法，首先先演示错误场景   <a href="{{}}" ></a>-->
      <h1>指令语法</h1>
      <a v-bind:href="school.url" target="_blank">{{school.name}}</a>
      <a :href="school.url" target="_blank">百度</a>
      <!--总结：插值语法就是解析标签体内容，指令语法解析标签-->
    <!--注意v-bind只解析标签属性  v-bind可以简写为:  内部也要使用Js表达式-->
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
    <script type="text/javascript">
      //创建Vue实例
      const x = new Vue({
        el: "#root", //element缩写，指定当前实例为哪个容器服务，值通常为CSS选择器字符串。   #为id选择器  .为class选择器
        data: {
          //data中用于存放数据，只针对el所指定的容器使用，值暂时写成一个对象
          name: "jack",
          //设置多级结构，可支持同名属性
          school:{
            name:"尚硅谷",
            url: "https://www.baidu.com",
          }
        },
      });
    </script>
  </body>
</html>
